<template>
  <div class="w-full h-full flex flex-row content-center justify-center	relative items-center">
    <div class="flex-1 flex h-full box-border flex-col relative justify-center items-center p-5">
          <span class="cursor-pointer" @click="navigateTo('/')">
            <img class="h-12" v-if="appstore.theme === 'dark'" src="~/assets/img/images/logo_light.png" alt="">
            <img class="h-12" v-else src="~/assets/img/images/logo_dark.png" alt="">
          </span>
          <span class="text-sm tracking-[0.5em] mt-4 items-center rounded-full border-slate-150 bg-white/10 px-8 py-2 text-white-900">急你所急,从容而为</span>
          <div class="shadow-sm absolute font-mono antialiased bottom-0 text-black/[0.6] left-0 right-0 text-center pb-6 text-xs dark:text-white/[0.6]">
            Copyright © 2024 boxtools.net. All Rights Reserved.
          </div>
    </div>
    <div class="bg-white w-1/2 h-full flex justify-center items-center flex-col shadow-2xl text-slate-900 ">
      <el-scrollbar class="w-full text-center">
        <div class="flex flex-col h-full justify-center items-center">
          <div class="text-left p-28 w-3/4">
            <div class="flex space-x-1 rounded-lg bg-slate-50 p-1">
              <button class="flex w-1/2 justify-center items-center rounded-md py-[0.4375rem] pl-2 pr-2 text-sm font-semibold lg:pr-3 bg-white shadow" type="button">
                <svg-icon width="20px" height="20px" class="stroke-sky-500" name="user"></svg-icon>
                <span class="sr-only lg:not-sr-only lg:ml-2 text-slate-900">账户</span>
              </button>
              <button class="flex w-1/2 items-center justify-center rounded-md py-[0.4375rem] pl-2 pr-2 text-sm font-semibold lg:pr-3" type="button">
                <svg-icon width="20px" height="20px" class="stroke-sky-500" name="phone"></svg-icon>
                <span class="sr-only lg:not-sr-only lg:ml-2 text-slate-600">验证码</span>
              </button>
            </div>
            <div class="pt-4 custom-form">
              <ClientOnly>
              <el-form :model="form" size="large" label-position="top">
                <el-form-item label="用户名" :rules="[{ required: true, message: '请输入用户名' }]">
                  <el-input class="shadow-sm placeholder:text-gray-400" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" :rules="[{ required: true, message: '请输入用户名' }]">
                  <el-input class="shadow-sm placeholder:text-gray-400" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="验证码" :rules="[{ required: true, message: '请输入用户名' }]">
                  <el-input class="shadow-sm placeholder:text-gray-400" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-row class="w-full">
                    <el-col :span="12">
                      <el-checkbox v-model="form.checked">记住账户名</el-checkbox>
                    </el-col>
                    <el-col :span="12" align="right">
                      <el-link type="primary">忘记密码？</el-link>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <button class="rounded-md btn text-slate-900 hover:bg-slate-900/80 text-white bg-slate-900 w-full shadow">登录</button>
                  <button class="rounded-md btn hover:bg-slate-400/10 border-slate-400 text-slate-800 py-[0.4375rem] text-sm font-semibold bg-white shadow mt-4 w-full">没有账户?</button>
                </el-form-item>
              </el-form>
              <div v-if="false" class="divider">第三方登录</div>
            </ClientOnly>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <Pattern/>
  </div>
</template>
<script lang="ts" setup>
const appstore = useAppStore()
useHead({
    title: '登录',
    meta: [
        { hid: 'og:title', property: 'og:title', content: '工具盒子、json工具' }, 
        { hid: 'keywords', name: 'keywords', content: '代码对比,代码对比工具,代码合并工具,在线代码对比工具,在线代码合并工具,代码差异对比,差异代码合并' }, 
        { hid: 'description', name: 'description', content: 'json格式化、压缩、保存、复制' },  
    ],
    htmlAttrs: {
      'class': ()=>appstore?.theme,
      'data-theme':()=>appstore?.theme,
    },
})

const form = reactive({
    username: '',
    password: '',
    checked:false
})

// definePageMeta({
//   layout: false,
// });
// test()
function na() {
    navigateTo('/')
}
console.info(tools.test())
</script>
<style lang="scss" scoped>
:deep(.el-scrollbar__view){
  height: 100%;
}
</style>